<template >
  <div class="body">
    <div class="bodasa">
      <div
        class="film"
        v-for="(ite, index) in data"
        :key="ite.filmId"
        @click="Detail(ite.filmId)"
      >
        <img :src="ite.poster" alt="" />
        <div class="content">
          <p>
            <span>{{ ite.name }}</span>
            <span>{{ ite.filmType.name }}</span>
          </p>
          <p>
            <span>{{ ite.grade | audience }}</span>
          </p>
          <p>主演：{{ arr[index] | capitalize }}</p>
          <p>
            <span>{{ ite.nation }}</span>
            <span>| {{ ite.runtime }}分钟</span>
          </p>
          <span>购票</span>
        </div>
      </div>
      <div class="bottoma">{{ this.div }}</div>
    </div>
  </div>
</template>
<script>
import { coming } from "../api/api";
export default {
  props: [],
  data() {
    return {
      data: [],
      arr: [],
      num: 1,
      flag: true,
      div: "",
      cityid: "440100",
    };
  },
  computed: {},
  methods: {
    Request() {
      coming(this.cityid, this.num).then((res) => {
        console.log(res);
        if (res.data.data.films.length == 0) {
          this.div = "已经拉到最低下了";
        } else {
          this.data = this.data.concat(res.data.data.films);
          this.data.forEach(ite => {
            // console.log("ite",ite);
            let arry = [];
            ite.actors.forEach((ite1) => {
              arry.push(ite1.name);
            });
            this.arr.push(arry);
          });
          this.flag = true;
        }
      });
    },
    handleScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight > scrollHeight - 200 && this.flag) {
        this.flag = false;
        this.num = this.num + 1;
        this.Request();
      }
    },
    Detail(id) {
      this.$router.push("/Detail?" + id);
    },
  },
  components: {},
  filters: {
    capitalize: function (val) {
      if (!val) return "";
      return val.join();
    },
    audience: function (val) {
      if (!val) return "";
      return "观众评分" + val;
    },
  },
  watch: {},
  created() {
    this.cityid=this.$store.state.cityId;
    this.Request();
  },
  beforeMount() {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style scoped>
*  {
  padding: 0;
  margin: 0;
}
.body {
  width: 90%;
  height: 100%;
}

.film {
  width: 100%;
  height: 8.333333rem;
  border-bottom: 1px solid #eee;
  margin-left: 20px;
  margin-top: 20px;
  display: flex;
  position: relative;
}
.film > img {
  width: 80px;
  height: 120px;
}
.content {
  margin-left: 5px;
}
.content > p:nth-of-type(1) > span:nth-of-type(1) {
  font-size: 18px;
}
.content > p:nth-of-type(1) > span:nth-of-type(2) {
  display: inline-block;
  width: 25px;
  height: 20px;
  background-color: #ddd;
  color: #fff;
  text-align: center;
  line-height: 20px;
  margin-left: 5px;
}
.content > p:nth-of-type(1) {
  margin-top: 10px;
}
.content > p:nth-of-type(2) {
  margin-top: 5px;
  font-size: 16px;
}
.content > p:nth-of-type(2) > span:nth-of-type(1) {
  color: #aaa;
  margin-right: 5px;
}

.content > p:nth-of-type(3) {
  width: 13.8rem;
  color: #aaa;
  margin-top: 5px;
  font-size: 14px;
  white-space: nowrap; /*不允许换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出三点代替*/
}
.content > p:nth-of-type(4) {
  color: #aaa;
  margin-top: 5px;
  font-size: 14px;
}
.content > span {
  display: block;
  position: absolute;
  top: 61px;
  right: 0px;
  width: 45px;
  height: 25px;
  border: 1px solid red;
  font-size: 14px;
  text-align: center;
  line-height: 25px;
  border-radius: 5px;
  color: red;
}
.body {
  padding-bottom: 50px;
}
.bottoma {
  text-align: center;
  color: #ccc;
}
</style>